<template>
	<div class="community-list-title">
		<span>公告/新闻</span>
	</div>
	<div class="community-list-bottom" @scroll="handleNewScroll">
		<commonNewList :data="newData"></commonNewList>
		<div v-if="newData.length === 0" class="no-data">
			<img src="../assets/image/noData.png">
			<p>暂无推荐</p>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import commonNewList from './commonNewList.vue'
	import {cachLoading} from '../public/common.ts'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		HttpInterpolateList,
		HttpNewList
	} from '../public/http'
	
	// 新闻
	let newData = ref([])
	let currentNewPage = ref(1)
	let isNewPage = ref(1)
	
	// 监听新闻是否到底部
	const handleNewScroll = (e) => {
		const {
			scrollTop,
			clientHeight,
			scrollHeight
		} = e.currentTarget
		console.log(scrollTop + clientHeight , scrollHeight )
		if (scrollTop + clientHeight >= (scrollHeight - 1) && isNewPage) {
			isNewPage.value = 0
			currentNewPage.value++
			newMain(currentNewPage.value, true)
		}
	}
	// 新闻列表
	const newMain = (page, type) => {
		if(!type && cachLoading('newData')){
			newData.value = cachLoading('newData')
		}
		HttpNewList(page, {
			key_word: ""
		}).then((res: any) => {
			if (res.code === 200) {
				if (type) {
					newData.value = newData.value.concat(res.data.newData)
				} else {
					cachLoading('newData',res.data.newData)
					newData.value = res.data.newData
				}
				currentNewPage.value = parseInt(res.data.current_page)
			}
			if (res.data.newData && res.data.newData.length == 0) {
				currentNewPage.value--
			}
			setTimeout(() => {
				isNewPage.value = 1
			})
	
		})
	}
	onMounted(() => {
		newMain(1)
	})
</script>

<style lang="scss">
	.community-list-title {
		font-size: 15px;
		color: rgb(145, 149, 160);
		margin-right: 30px;
		cursor: pointer;
		height: 30px;
	}
	
	.community-list-bottom {
		width: 100%;
		height: calc(100% - 30px);
		overflow: auto;
	}
</style>
